<!-- 威胁等级仪表盘组件 -->
<template>
  <div class="threat-dashboard">
    <!-- 仪表盘标题 -->
    <div class="dashboard-header">
      <h2 class="dashboard-title">
        <el-icon class="title-icon"><Odometer /></el-icon>
        威胁等级仪表盘
      </h2>
      <div class="view-controls">
        <el-radio-group v-model="activeView" size="small">
          <el-radio-button label="overall">总体态势</el-radio-button>
          <el-radio-button label="aircraft">战机威胁</el-radio-button>
          <el-radio-button label="ship">舰船威胁</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 仪表盘内容 -->
    <div class="dashboard-content">
      <!-- 总体态势视图 -->
      <div v-if="activeView === 'overall'" class="overall-view">
        <!-- 主仪表盘 -->
        <div class="main-gauge-container">
          <div class="main-gauge" ref="mainGaugeRef"></div>
          <div class="gauge-info">
            <div class="threat-value">{{ (threatData.overall * 100).toFixed(1) }}%</div>
            <div class="threat-status" :class="getThreatClass(threatData.overall)">
              {{ getThreatLabel(threatData.overall) }}
            </div>
          </div>
        </div>

        <!-- 趋势图表 -->
        <div class="trend-chart">
          <h3>威胁趋势</h3>
          <div ref="trendChartRef" class="trend-chart-container"></div>
        </div>

        <!-- 区域威胁分布 -->
        <div class="region-threats">
          <h3>区域威胁分布</h3>
          <div class="region-list">
            <div 
              v-for="region in threatData.regions" 
              :key="region.name"
              class="region-item"
              :class="getThreatClass(region.level)"
            >
              <div class="region-name">{{ region.name }}</div>
              <div class="region-level">
                <el-progress 
                  :percentage="region.level * 100" 
                  :color="getThreatColor(region.level)"
                  :show-text="false"
                  :stroke-width="6"
                />
                <span class="level-text">{{ (region.level * 100).toFixed(0) }}%</span>
              </div>
              <div class="region-count">{{ region.count }} 个目标</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 战机威胁视图 -->
      <div v-if="activeView === 'aircraft'" class="aircraft-view">
        <div class="threat-list-header">
          <h3>战机威胁监控</h3>
          <el-button size="small" @click="sortAircraftByThreat">
            <el-icon><Sort /></el-icon>
            按威胁排序
          </el-button>
        </div>
        
        <div class="threat-list">
          <div 
            v-for="aircraft in sortedAircraft" 
            :key="aircraft.id"
            class="threat-item"
            :class="{ selected: selectedThreat?.id === aircraft.id }"
            @click="selectThreat(aircraft)"
          >
            <div class="threat-header">
              <div class="threat-id">{{ aircraft.id }}</div>
              <div class="threat-type">{{ aircraft.type }}</div>
              <div class="threat-level" :class="getThreatClass(aircraft.threat)">
                {{ (aircraft.threat * 100).toFixed(0) }}%
              </div>
            </div>
            
            <div class="threat-details">
              <div class="detail-item">
                <el-icon><Position /></el-icon>
                <span>距离: {{ aircraft.distance }}km</span>
              </div>
              <div class="detail-item">
                <el-icon><Position /></el-icon>
                <span>方位: {{ aircraft.bearing }}°</span>
              </div>
              <div class="detail-item">
                <el-icon><Promotion /></el-icon>
                <span>速度: {{ aircraft.speed }}km/h</span>
              </div>
              <div class="detail-item">
                <el-icon><Top /></el-icon>
                <span>高度: {{ aircraft.altitude }}m</span>
              </div>
            </div>
            
            <!-- 威胁指示器 -->
            <div class="threat-indicator">
              <div class="indicator-bar" :style="{ width: aircraft.threat * 100 + '%', backgroundColor: getThreatColor(aircraft.threat) }"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 舰船威胁视图 -->
      <div v-if="activeView === 'ship'" class="ship-view">
        <div class="threat-list-header">
          <h3>舰船威胁监控</h3>
          <el-button size="small" @click="sortShipsByThreat">
            <el-icon><Sort /></el-icon>
            按威胁排序
          </el-button>
        </div>
        
        <div class="threat-list">
          <div 
            v-for="ship in sortedShips" 
            :key="ship.id"
            class="threat-item"
            :class="{ selected: selectedThreat?.id === ship.id }"
            @click="selectThreat(ship)"
          >
            <div class="threat-header">
              <div class="threat-id">{{ ship.id }}</div>
              <div class="threat-type">{{ ship.type }}</div>
              <div class="threat-level" :class="getThreatClass(ship.threat)">
                {{ (ship.threat * 100).toFixed(0) }}%
              </div>
            </div>
            
            <div class="threat-details">
              <div class="detail-item">
                <el-icon><Position /></el-icon>
                <span>距离: {{ ship.distance }}km</span>
              </div>
              <div class="detail-item">
                <el-icon><Position /></el-icon>
                <span>方位: {{ ship.bearing }}°</span>
              </div>
              <div class="detail-item">
                <el-icon><Promotion /></el-icon>
                <span>速度: {{ ship.speed }}节</span>
              </div>
              <div class="detail-item">
                <el-icon><ScaleToOriginal /></el-icon>
                <span>排水量: {{ ship.displacement }}吨</span>
              </div>
            </div>
            
            <!-- 威胁指示器 -->
            <div class="threat-indicator">
              <div class="indicator-bar" :style="{ width: ship.threat * 100 + '%', backgroundColor: getThreatColor(ship.threat) }"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import {
  Odometer,
  Sort,
  Position,
  Promotion,
  Top,
  ScaleToOriginal
} from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  threatData: {
    type: Object,
    required: true
  },
  aircraftThreats: {
    type: Array,
    required: true
  },
  shipThreats: {
    type: Array,
    required: true
  }
})

// 定义事件
const emit = defineEmits(['threatSelected'])

// 响应式数据
const activeView = ref('overall')
const selectedThreat = ref(null)
const aircraftSortOrder = ref('desc')
const shipSortOrder = ref('desc')

// DOM引用
const mainGaugeRef = ref(null)
const trendChartRef = ref(null)

// 图表实例
let mainGaugeChart = null
let trendChart = null

// 计算属性
const sortedAircraft = computed(() => {
  return [...props.aircraftThreats].sort((a, b) => {
    return aircraftSortOrder.value === 'desc' ? b.threat - a.threat : a.threat - b.threat
  })
})

const sortedShips = computed(() => {
  return [...props.shipThreats].sort((a, b) => {
    return shipSortOrder.value === 'desc' ? b.threat - a.threat : a.threat - b.threat
  })
})

// 威胁等级分类
const getThreatClass = (level) => {
  if (level >= 0.7) return 'high'
  if (level >= 0.4) return 'medium'
  return 'low'
}

const getThreatLabel = (level) => {
  if (level >= 0.7) return '高威胁'
  if (level >= 0.4) return '中等威胁'
  return '低威胁'
}

const getThreatColor = (level) => {
  if (level >= 0.7) return '#ff4757'
  if (level >= 0.4) return '#ffa502'
  return '#2ed573'
}

// 威胁选择
const selectThreat = (threat) => {
  selectedThreat.value = threat
  emit('threatSelected', threat)
}

// 排序
const sortAircraftByThreat = () => {
  aircraftSortOrder.value = aircraftSortOrder.value === 'desc' ? 'asc' : 'desc'
}

const sortShipsByThreat = () => {
  shipSortOrder.value = shipSortOrder.value === 'desc' ? 'asc' : 'desc'
}

// 初始化主仪表盘
const initMainGauge = () => {
  if (!mainGaugeRef.value) return
  
  mainGaugeChart = echarts.init(mainGaugeRef.value)
  
  const option = {
    backgroundColor: 'transparent',
    series: [
      {
        name: '威胁等级',
        type: 'gauge',
        detail: { show: false },
        data: [{ value: props.threatData.overall * 100, name: '威胁等级' }],
        min: 0,
        max: 100,
        startAngle: 225,
        endAngle: -45,
        radius: '80%',
        center: ['50%', '50%'],
        axisLine: {
          lineStyle: {
            width: 20,
            color: [
              [0.4, '#2ed573'],
              [0.7, '#ffa502'],
              [1, '#ff4757']
            ]
          }
        },
        pointer: {
          width: 8,
          length: '60%',
          itemStyle: {
            color: '#bfcbd9'
          }
        },
        axisTick: {
          length: 15,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          length: 25,
          lineStyle: {
            color: 'auto',
            width: 4
          }
        },
        axisLabel: {
          color: '#bfcbd9',
          fontSize: 12,
          distance: -60,
          formatter: function(value) {
            return value + '%'
          }
        }
      }
    ]
  }
  
  mainGaugeChart.setOption(option)
}

// 初始化趋势图
const initTrendChart = () => {
  if (!trendChartRef.value) return
  
  trendChart = echarts.init(trendChartRef.value)
  
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['5分钟前', '4分钟前', '3分钟前', '2分钟前', '1分钟前'],
      axisLine: {
        lineStyle: { color: '#2d3a4b' }
      },
      axisLabel: {
        color: '#8591a3',
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 1,
      axisLine: {
        lineStyle: { color: '#2d3a4b' }
      },
      axisLabel: {
        color: '#8591a3',
        fontSize: 10,
        formatter: '{value}'
      },
      splitLine: {
        lineStyle: { color: '#2d3a4b', width: 1 }
      }
    },
    series: [
      {
        data: props.threatData.trends,
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#409EFF',
          width: 3
        },
        itemStyle: {
          color: '#409EFF'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
          ])
        }
      }
    ]
  }
  
  trendChart.setOption(option)
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    initMainGauge()
    initTrendChart()
    
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      mainGaugeChart?.resize()
      trendChart?.resize()
    })
  })
})
</script>

<style scoped>
.threat-dashboard {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1f2d3d;
  padding: 1.5vh 1vw;
}

/* 仪表盘标题 */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid #2d3a4b;
}

.dashboard-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #bfcbd9;
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.title-icon {
  font-size: 1.3rem;
  color: #409EFF;
}

/* 视图控制 */
.view-controls .el-radio-group :deep(.el-radio-button__inner) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
  font-size: 0.75rem;
  padding: 0.5vh 1vw;
}

.view-controls .el-radio-group :deep(.el-radio-button__inner:hover) {
  background: #2d3a4b !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

.view-controls .el-radio-group :deep(.el-radio-button.is-active .el-radio-button__inner) {
  background: #409EFF !important;
  border-color: #409EFF !important;
  color: #ffffff !important;
}

/* 仪表盘内容 */
.dashboard-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 总体态势视图 */
.overall-view {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1vh;
}

/* 主仪表盘 */
.main-gauge-container {
  position: relative;
  background: rgba(38, 52, 69, 0.3);
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b;
  padding: 1vh;
}

.main-gauge {
  width: 100%;
  height: 25vh;
}

.gauge-info {
  position: absolute;
  bottom: 2vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.threat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #bfcbd9;
  margin-bottom: 0.5vh;
}

.threat-status {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.3vh 1vw;
  border-radius: 0.4vh;
}

.threat-status.high {
  background: rgba(255, 71, 87, 0.2);
  color: #ff4757;
  border: 1px solid #ff4757;
}

.threat-status.medium {
  background: rgba(255, 165, 2, 0.2);
  color: #ffa502;
  border: 1px solid #ffa502;
}

.threat-status.low {
  background: rgba(46, 213, 115, 0.2);
  color: #2ed573;
  border: 1px solid #2ed573;
}

/* 趋势图表 */
.trend-chart {
  background: rgba(38, 52, 69, 0.3);
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b;
  padding: 1vh;
}

.trend-chart h3 {
  margin: 0 0 1vh 0;
  font-size: 1rem;
  color: #bfcbd9;
  text-align: center;
}

.trend-chart-container {
  width: 100%;
  height: 20vh;
}

/* 区域威胁分布 */
.region-threats {
  grid-column: 1 / -1;
  background: rgba(38, 52, 69, 0.3);
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b;
  padding: 1vh;
}

.region-threats h3 {
  margin: 0 0 2vh 0;
  font-size: 1rem;
  color: #bfcbd9;
  text-align: center;
}

.region-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.region-item {
  display: grid;
  grid-template-columns: 1fr 2fr 0.8fr;
  align-items: center;
  gap: 1vw;
  padding: 1vh 1vw;
  background: rgba(31, 45, 61, 0.5);
  border-radius: 0.5vh;
  border-left: 3px solid;
}

.region-item.high {
  border-left-color: #ff4757;
}

.region-item.medium {
  border-left-color: #ffa502;
}

.region-item.low {
  border-left-color: #2ed573;
}

.region-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #bfcbd9;
}

.region-level {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.level-text {
  font-size: 0.8rem;
  color: #bfcbd9;
  min-width: 2.5vw;
  text-align: right;
}

.region-count {
  font-size: 0.8rem;
  color: #8591a3;
  text-align: right;
}

/* 威胁列表视图 */
.aircraft-view,
.ship-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.threat-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid #2d3a4b;
}

.threat-list-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #bfcbd9;
}

.threat-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

/* 威胁项目 */
.threat-item {
  background: rgba(38, 52, 69, 0.5);
  border: 1px solid #2d3a4b;
  border-radius: 0.8vh;
  padding: 1.5vh 1vw;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.threat-item:hover {
  background: rgba(38, 52, 69, 0.8);
  border-color: #409EFF;
  transform: translateY(-1px);
  box-shadow: 0 0.5vh 1.5vh rgba(0, 0, 0, 0.3);
}

.threat-item.selected {
  background: rgba(64, 158, 255, 0.1);
  border-color: #409EFF;
  box-shadow: 0 0 1vh rgba(64, 158, 255, 0.3);
}

.threat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}

.threat-id {
  font-size: 1rem;
  font-weight: bold;
  color: #409EFF;
}

.threat-type {
  font-size: 0.85rem;
  color: #bfcbd9;
  font-weight: 500;
}

.threat-level {
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.3vh 0.8vw;
  border-radius: 0.4vh;
}

.threat-level.high {
  background: rgba(255, 71, 87, 0.2);
  color: #ff4757;
  border: 1px solid #ff4757;
}

.threat-level.medium {
  background: rgba(255, 165, 2, 0.2);
  color: #ffa502;
  border: 1px solid #ffa502;
}

.threat-level.low {
  background: rgba(46, 213, 115, 0.2);
  color: #2ed573;
  border: 1px solid #2ed573;
}

.threat-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8vh 1vw;
  margin-bottom: 1vh;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8rem;
  color: #8591a3;
}

.detail-item .el-icon {
  font-size: 0.9rem;
  color: #409EFF;
}

/* 威胁指示器 */
.threat-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(45, 58, 75, 0.5);
}

.indicator-bar {
  height: 100%;
  transition: width 0.5s ease;
}

/* 滚动条样式 */
.dashboard-content::-webkit-scrollbar,
.threat-list::-webkit-scrollbar {
  width: 6px;
}

.dashboard-content::-webkit-scrollbar-track,
.threat-list::-webkit-scrollbar-track {
  background: #1f2d3d;
  border-radius: 3px;
}

.dashboard-content::-webkit-scrollbar-thumb,
.threat-list::-webkit-scrollbar-thumb {
  background: #2d3a4b;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.dashboard-content::-webkit-scrollbar-thumb:hover,
.threat-list::-webkit-scrollbar-thumb:hover {
  background: #409EFF;
}

/* Element Plus 组件样式覆盖 */
.threat-dashboard :deep(.el-button) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
  font-size: 0.8rem;
}

.threat-dashboard :deep(.el-button:hover) {
  background: #2d3a4b !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

.threat-dashboard :deep(.el-progress-bar__outer) {
  background: rgba(45, 58, 75, 0.5) !important;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .overall-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  
  .main-gauge {
    height: 20vh;
  }
  
  .trend-chart-container {
    height: 15vh;
  }
}

@media (max-width: 1200px) {
  .dashboard-title {
    font-size: 1rem;
  }
  
  .threat-details {
    grid-template-columns: 1fr;
    gap: 0.5vh;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    gap: 1vh;
    align-items: flex-start;
  }
  
  .region-item {
    grid-template-columns: 1fr;
    gap: 0.5vh;
    text-align: center;
  }
}
</style>